<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { getAllMenus } from '@/axios/api/acl/role';
import { add_menu } from '@/axios/api/acl/menu';
import { ElNotification } from 'element-plus';

// 抽屉是否显示
let dialog = ref(false);
// 添加菜单或按钮数据
let addacl_data = reactive<any>({
    acl_name: '',
    title: '',
    acl_type: 0,
    parent_id: 0
})

// 菜单列表

const menuList = ref<any>([]);

// 获取菜单列表
async function getMenuList() {
    menuList.value = [];
    let res = await getAllMenus(0);
    if (res.code == 200) {
        menuList.value.push(JSON.parse(res.data));
    } else {
        alert(res.msg);
    }

}

onMounted(async () => {
    getMenuList();
});

const handleAdd = (row: any) => {
    if (row.level == 0) { // 顶级菜单
        addacl_data.acl_type = 0;
        addacl_data.parent_id = 0;
    } else if (row.level == 1) { // 一级菜单
        addacl_data.parent_id = row.acl_id;
        addacl_data.acl_type = 0;
    } else if (row.level == 2) { // 二级菜单
        addacl_data.acl_type = 1;
        addacl_data.parent_id = row.acl_id;
    }
    addacl_data.acl_name = '';
    addacl_data.title = '';
    dialog.value = true;
}


const findMenuItem = (menuList: any, name: string, title: string) => {
    for (let i = 0; i < menuList.length; i++) {
        if (menuList[i].acl_name === name || menuList[i].title === title) {
            return true; // 找到匹配项后立即返回true
        }
        if (menuList[i].children) {
            // 如果在子菜单中找到了匹配项，则返回true，不再继续遍历
            if (findMenuItem(menuList[i].children, name, title)) {
                return true;
            }
        }
    }
    return false; // 循环结束后没有找到匹配项，则返回false
};



// 提交添加
async function handleUacl() {
    if (addacl_data.acl_type == 0) {
        if (findMenuItem(menuList.value, addacl_data.acl_name, addacl_data.title)) {
            alert('名称或标题重复，请重新输入');
            return;
        }
    }
    try {
        let res = await add_menu({
            parent_id: addacl_data.parent_id,
            acl_type: addacl_data.acl_type,
            acl_name: addacl_data.acl_name,
            title: addacl_data.title
        });
        ElNotification({
            title: 'Success',
            message: res.msg,
            type: 'success',
        });
        dialog.value = false;
        getMenuList();
    } catch (error: any) {
        ElNotification({
            title: 'Error',
            message: error,
            type: 'error',
        })
    }
}
</script>

<template>
    <el-table :data="menuList" style="width: 100%;margin-bottom: 20px;" row-key="acl_id" border>
        <el-table-column label="名称" prop="title"></el-table-column>
        <el-table-column label="权限ID" prop="acl_id"></el-table-column>
        <el-table-column label="权限值" prop="acl_name"></el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button :type="scope.row.level == 2 ? 'success' : 'warning'" size="small"
                    v-show="scope.row.level < 3" @click="handleAdd(scope.row)">{{ scope.row.level == 2 ? '添加按钮' : '添加菜单'
                    }}</el-button>
                <el-button type="primary" size="small" v-show="scope.row.level > 0">编辑</el-button>
                <el-button type="danger" size="small" v-show="scope.row.level > 0">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <!-- !-- 抽屉 添加菜单或按钮 -->
    <el-drawer ref="drawerRef" v-model="dialog" :title="addacl_data.level == 3 ? '添加按钮' : '添加菜单'" class="demo-drawer">
        <el-form ref="formRef" :model="addacl_data" label-width="80px">
            <el-form-item label="父级id">
                <el-input v-model="addacl_data.parent_id" disabled></el-input>
            </el-form-item>
            <el-form-item label="权限类型">
                <el-input v-model="addacl_data.acl_type" disabled></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="addacl_data.title" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="权限值">
                <el-input v-model="addacl_data.acl_name" placeholder="请输入权限值"></el-input>
            </el-form-item>
            <el-form-item>
                <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" icon="InfoFilled"
                    icon-color="#626AEF" title="是否确认添加?" @confirm="handleUacl">
                    <template #reference>
                        <el-button type="primary">提交</el-button>
                    </template>
                </el-popconfirm>

                <el-button type="danger" @click="dialog = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>


</template>



<style scoped lang="scss"></style>